<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生 AJAX 请求</title>
</head>
<body>
<button id="btn1">发送请求</button>
<table id="tbl">

</table>
<script type="text/javascript">
    function ajaxRequest() {
        //1.创建 XMLHttpRequest 对象
        var xmlHttpRequest = new XMLHttpRequest();
        //2.请求参数的设置 调用 open 方法
        xmlHttpRequest.open('GET', './ajax01.do?id=1&name=张三&school=实验中学&age=19', true);
        //3. 监听  onreadystatechange 事件
        //当 readyState 改变时，就会触发 onreadystatechange 事件
        //readyState == 4: 请求已完成，且响应已就绪
        xmlHttpRequest.onreadystatechange = function () {
            //等到服务器响应就绪的时候 执行以下内容
            if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                // xmlHttpRequest.responseText  代表服务器响应的字符串参数
                console.log(xmlHttpRequest.responseText);
                var jsonObj = JSON.parse(xmlHttpRequest.responseText);
                console.log(jsonObj);
            }
        }
        //4.调用 send 方法 发送请求
        xmlHttpRequest.send();
    }

    window.onload = function () {
        document.getElementById('btn1').onclick = function () {
            ajaxRequest();
        }
    }
</script>
</body>
</html>